<template>
  <div class="classMates">
    <div class="classMatesHead">
      <a @click="$router.push('/Course')" class="el-icon-back"></a>
      <a style="float: left">
        <el-button>{{selectedCourse.name}}</el-button>
      </a>
      <div class="MainHead">
        <div :class="{'MainHeadActive':isActive1}" @click="active(1)" style="width: 100px;height: 42px;float: left;">
          同学
        </div>
        <div :class="{'MainHeadActive':isActive2}" @click="active(2)" style="width: 100px;height: 42px;float: left">
          学生分组
        </div>
        <div :class="{'MainHeadActive':isActive3}" @click="active(3)" style="width: 100px;height: 42px;float: left">成绩
        </div>
        <el-menu mode="horizontal" style="position: absolute;top: 10px;right: 20px">
          <Tools></Tools>
        </el-menu>
      </div>
    </div>
    <div :class="{'mainContent1':true,'hideMainContent':!isActive1}">
      <div class="mainContent1left">
        <div :class="{'mainContent1leftButton':true,'mainContent1leftButtonactive':isActive4}" @click="active(4)"
             style="border-radius: 8px 0 0 0;"><a>教学团队({{selectedCourse.teacherList.length}})</a></div>
        <div :class="{'mainContent1leftButton':true,'mainContent1leftButtonactive':isActive5}" @click="active(5)"><a>全部学生(学生{{selectedCourse.studentList.length}})</a>
        </div>
      </div>
      <div :class="{'mainContent1right1':true,'mainContent1right1hide':!isActive4}">
        <div class="mainContent1righthead">
          <label style="float: left">教师团队({{selectedCourse.teacherList.length}})</label>
          <input style="float: right;width: 120px;height: 24px" type="text" v-model="teacherSearch"  placeholder="姓名/学号"></input>
        </div>
        <el-table
          :data="teacherTables"
          style="width: 100%">
          <el-table-column
            width="50"
            type="selection">
          </el-table-column>
          <el-table-column
            prop="headerUrl"
            label="头像"
            width="120">
            <div slot-scope="scope">
              <el-avatar style="width: 30px;height: 30px"  :src="$store.getters.getAvatarBaseUrl+scope.row.avatarPath" ></el-avatar>
            </div>

          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="teacherId"
            label="教师号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="college"
            label="学校"
            width="160">
          </el-table-column>
          <el-table-column
            prop="phoneNum"
            label="教师账号"
            width="180">
          </el-table-column>
          <el-table-column
            label="回复"
            width="100">
            <img src="https://www.ketangpai.com/Public/Home/img/sixin.png">
          </el-table-column>
        </el-table>
      </div>


      <div :class="{'mainContent1right1':true,'mainContent1right1hide':!isActive5}">
        <div class="mainContent1righthead">
          <!--          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>-->
          <div class="batchDelete">
            <el-button @click="deleteChecked" v-if="currentUser.role =='teacher'">批量删除</el-button>
          </div>
          <label style="float: left">全部学生(全部{{selectedCourse.studentList.length}})</label>
          <input style="float: right;width: 120px;height: 24px" id="search"  v-model="studentSearch"   type="text" placeholder="姓名/学号"></input>
        </div>
        <el-table
          :data="studentTables"
          tooltip-effect="dark"
          style="width: 100%"
          height="540px"
          ref="tableChecked"
          class="studentTableClass"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            width="50"
            type="selection">
          </el-table-column>
          <el-table-column
            prop="headerUrl"
            label="头像"
            width="120">
            <template slot-scope="scope">
              <el-avatar style="width: 30px;height: 30px"  :src="$store.getters.getAvatarBaseUrl+scope.row.avatarPath" ></el-avatar>
            </template>

          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="studentId"
            label="学号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="school"
            label="学校"
            width="160">
          </el-table-column>
          <el-table-column
            prop="phoneNum"
            label="学生账号"
            width="180">
          </el-table-column>
          <el-table-column
            label="删除"
            v-if="currentUser.role==='teacher'"
            width="100">
            <template slot-scope="scope">
              <el-popconfirm
                title="确定删除吗？"
                @onConfirm="deleteIndex(scope.$index)"
              >
                <label slot="reference" style="cursor: pointer" class="el-icon-delete"></label>
              </el-popconfirm>
            </template>

          </el-table-column>
          <el-table-column width="100" v-else label="聊天">
            <img style="margin-left: 7px"  src="https://www.ketangpai.com/Public/Home/img/sixin.png">
          </el-table-column>
        </el-table>
        <div class="mainContent1right1bottom">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="parseInt(selectedCourse.studentList.length)">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import Tools from "../../components/Tools";
  import http from "../../utils/http";
  export default {

    name: "Classmate",
    inject: ['reload'],
    components: {
      Tools,
    },
    data() {
      return {
        currentUser:this.$store.getters.getUser,
        selectedCourse:this.$store.getters.getCourse,
        addCodeflag: "",

        teacherSearch:"",
        studentSearch:"",
        isActive1: true,
        isActive2: false,
        isActive3: false,
        isActive4: true,
        isActive5: false,
        // courseGetAccount: '',
        // studentNumber: "",
        // 分页
        allStudent: 100,
        currentPage: 1,
        pageSize: 7,

        // teacherData: [{}],
        // classCode: {
        //   code: this.$cookies.get('addCode'),
        //   name: '',
        //   school: '',
        //   studentAccountId: '',
        //   studentId: '',
        // },
        // studentData: [],
        tableChecked: [],
      }
    },
    computed: {
      // 模糊搜索
      teacherTables:function() {
        const search = this.teacherSearch
        if (search) {
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          // 注意： filter() 不会对空数组进行检测。
          // 注意： filter() 不会改变原始数组。
          return this.selectedCourse.teacherList.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            // some() 方法会依次执行数组的每个元素：
            // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
            // 如果没有满足条件的元素，则返回false。
            // 注意： some() 不会对空数组进行检测。
            // 注意： some() 不会改变原始数组。
            return Object.keys(data).some(key => {
              // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
              // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.selectedCourse.teacherList;
      },
      // 模糊搜索
      studentTables:function() {
        const search = this.studentSearch;
        if (search) {
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          // 注意： filter() 不会对空数组进行检测。
          // 注意： filter() 不会改变原始数组。
          return this.selectedCourse.studentList.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            // some() 方法会依次执行数组的每个元素：
            // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
            // 如果没有满足条件的元素，则返回false。
            // 注意： some() 不会对空数组进行检测。
            // 注意： some() 不会改变原始数组。
            return Object.keys(data).some(key => {
              // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
              // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.selectedCourse.studentList;
      }
    },
    // 页面初始化完成后要加载的东西
    created() {
      // this.getList();
      // this.getStudentNumber();
      this.currentPage = 1;
      const _this = this
      console.log(this.$store.getters.getCourse)
      // //this指的是当前的vue对象，把vue对象赋给_this
      // http.get('/studentList',{code:this.addCodeflag} ,{page:_this.currentPage}).then(function (resp) {
      //   //回调函数中的this指的是回调
      //   //把data数据赋给_this，即vue对象
      //   _this.studentData = resp.data
      // })
    },

    mounted() {
      // this.showLandHome();
    },

    methods: {
      getTeacherListBySearch(){
        // let teachers=[];
        // this.selectedCourse.teacherList.filter(item => {
        //   if (item.teacherId.indexOf(this.teacherSearch) !== -1) {
        //     teachers.push(item);
        //   }
        // })
        return this.selectedCourse.teacherList;
      },
      deleteIndex(value) {
        const _this = this
        console.log(value)
        let student=this.selectedCourse.studentList[value]
        http.get('teacher/deleteStudent',{studentId:student.studentId,code:this.selectedCourse.code}).then((resp) => {
          if(resp.data.code==200){
            this.$message.success(resp.data.message);
            this.selectedCourse.studentList.splice(this.selectedCourse.studentList.indexOf(student),1);
            this.$store.commit('setCourse',this.selectedCourse)
          }else {
            this.$message.error(resp.data.message);
          }
        })
      },
      handleSelectionChange(val) {
        this.tableChecked = val;
      },
      deleteChecked() {
        const _this = this;
        console.log(this.tableChecked)
        if(this.tableChecked.length==0){
          this.$message({
            message: '你还未选择',
            type: 'warning'
          });

        }else {
          let deleteStudentsDTO={
            studentList:this.tableChecked,
            code:this.selectedCourse.code
          }
          http.post('teacher/deleteCheckedStudent', deleteStudentsDTO)
            .then((resp) => {

              if(resp.data.code==200){
                this.$message.success(resp.data.message);
                for (let i = 0; i < this.tableChecked.length; i++) {
                  this.selectedCourse.studentList.splice(this.selectedCourse.studentList.indexOf(this.tableChecked[i]),1);
                }
                this.$store.commit('setCourse',this.selectedCourse)
              }else {
                this.$message.error(resp.data.message);
              }
            })
        }

      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
        console.log(this.currentPage)
        this.addCodeflag = this.$cookies.get('addCode');
        const _this = this
        //this指的是当前的vue对象，把vue对象赋给_this
        http.get('http://localhost:8080/studentList',{code:this.addCodeflag, page: _this.currentPage}).then(function (resp) {
          //回调函数中的this指的是回调
          //把data数据赋给_this，即vue对象
          _this.studentData = resp.data
        })
      },
      getList() {
        this.addCodeflag = this.$cookies.get('addCode');
        const _this = this
        http.get('http://localhost:8080/getTeacher',{account:this.$cookies.get('teacherAccount')}).then(function (resp) {
          //回调函数中的this指的是回调
          //把data数据赋给_this，即vue对象
          _this.teacherData = resp.data

        })
      },
      showLandHome() {
        if (!(sessionStorage.getItem("land") == "true")) {
          this.$router.push('/login');
        } else {
          // this.$router.push('/Main');
        }
      },
      active(value) {
        if (value == 1) {
          this.isActive1 = true,
            this.isActive2 = false,
            this.isActive3 = false
        } else if (value == 2) {
          this.isActive1 = false,
            this.isActive2 = true,
            this.isActive3 = false
        } else if (value == 3) {
          this.isActive1 = false,
            this.isActive2 = false,
            this.isActive3 = true
        } else if (value == 4) {
          this.isActive4 = true,
            this.isActive5 = false
        } else {
          this.isActive4 = false,
            this.isActive5 = true
        }
      }

    }

  }
</script>

<style scoped>
  .classMates {
    width: 1520px;
    height: auto;
  }

  .classMatesHead {
    width: 1520px;
    height: 50px;
    padding-top: 20px;
    border-bottom: #9A9A9A solid 1px;
  }

  .el-icon-back {
    margin-right: 20px;
    margin-left: 20px;
    font-size: 30px;
    font-weight: 600;
    float: left;
    margin-top: 5px;
    text-decoration: none;
    color: black;
    cursor: pointer;
  }

  .classMatesHead .el-button {
    border-radius: 60px;
    background-color: #2C58AB;
    color: white;
  }

  .classMatesHead .MainHead {
    width: 300px;
    height: 45px;
    padding-top: 5px;
    cursor: pointer;
  }

  .classMatesHead .el-submenu {
    width: 80px;
  }

  .MainHeadActive {
    border-bottom: #569fe0 solid 4px;
  }

  .mainContent1 {
    width: 1220px;
    height: 600px;
    border-radius: 10px;
    border: #9A9A9A solid 1px;
    margin-top: 50px;
  }

  .mainContent1left {
    width: 300px;
    height: 600px;
    border-right: #9A9A9A solid 1px;
    float: left;
  }

  .hideMainContent {
    display: none;
  }

  .mainContent1leftButton {
    width: 300px;
    height: 40px;
    padding-top: 20px;
    /*border-top: #9A9A9A solid 1px;*/
    border-bottom: #9A9A9A solid 1px;
  }

  .mainContent1leftButton:hover {
    background-color: #e4edfd;
  }

  .mainContent1leftButtonactive {
    background-color: #32BAF0 !important;
  }

  .mainContent1right1 {
    width: 918px;
    height: 600px;
    float: right;
  }

  .mainContent1righthead {
    width: 878px;
    height: 40px;
    background-color: rgba(241, 243, 244, 1);
    border-radius: 0 8px 0 0;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .mainContent1right1bottom {
    width: 878px;
    height: 40px;
    /*position: absolute;*/
    /*top: 300px;*/
  }

  .mainContent1right1 .el-table__header-wrapper {
    display: none;
  }

  .mainContent1right1hide {
    display: none;
  }
</style>
<style>

  .mainContent1right1 .el-table {
    height: 472px !important;
  }

  .el-pagination__editor.el-input .el-input__inner {
    height: 19px;
  }

  .batchDelete {
    width: 150px;
    float: left;
  }
  .batchDelete .el-button{
    padding: 7px 9px!important;
  }
  .studentTableClass td {
    padding-top: 12px !important;
    padding-bottom: 11px !important;
  }
</style>
